<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加菜单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${global_templets_skin}/systemstyle/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${global_templets_skin}/systemstyle/style/admin.css" media="all">
</head>
<body>

<div class="layui-card-body">
    <form class="layui-form" action="" lay-filter="component-form-element">
        <input id="parentId" name="parentId" type="hidden" value="${menu.parentId!}" />
        <div class="layui-form-item">
            <label class="layui-form-label">上级菜单：</label>
            <div class="layui-input-block">
                <div class="input-group">
                    <input class="layui-input" type="text" id="parentTreeName" readonly="false"  data-type="menuTree" value="${parentMenu.menuName}">
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单类型：</label>
            <div class="layui-input-block">
                <input type="radio" name="menuType" value="M" title="目录" lay-filter="menuType"<#if menu.menuType =="M"> checked="checked"</#if>>
                <input type="radio" name="menuType" value="C" title="菜单" lay-filter="menuType"<#if menu.menuType =="C"> checked="checked"</#if>>
                <input type="radio" name="menuType" value="F" title="按钮" lay-filter="menuType"<#if menu.menuType =="F"> checked="checked"</#if>>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称：</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="menuName" id="menuName" value="${menu.menuName!}" required>
            </div>
        </div>
        <div class="layui-form-item"<#if menu.menuType != "C"> style="display: none;"</#if>>
            <label class="layui-form-label">请求地址：</label>
            <div class="layui-input-block">
                <input id="url" name="url" class="layui-input" type="text" value="${menu.url!}">
            </div>
        </div>
        <div class="layui-form-item"<#if menu.menuType != "C"> style="display: none;"</#if>>
            <label class="layui-form-label">打开方式：</label>
            <div class="layui-input-block">
                <select id="target" name="target" class="layui-input">
                    <option value="0">页签</option>
                    <option value="1">新窗口</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item"<#if menu.menuType == "M"> style="display: none;"</#if>>
            <label class="layui-form-label">权限标识：</label>
            <div class="layui-input-block">
                <input id="perms" name="perms" class="layui-input" type="text" value="${menu.perms!}">
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 控制器中定义的权限标识，如：@RequiresPermissions("")</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示排序：</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="sortOrder" value="${menu.sortOrder!}" required>
            </div>
        </div>
        <div class="layui-form-item"<#if menu.menuType =="F"> style="display: none;"</#if>>
            <label class="layui-form-label">图标：</label>
            <div class="layui-input-block">
                <input id="icon" name="icon" class="layui-input" type="text" value="${menu.icon!}" placeholder="选择图标">
                <div class="ms-parent">
                    <div class="icon-drop animated flipInX" style="display: none;max-height:200px;overflow-y:auto">
                        <ul class="site-doc-icon">
                            <li>
                                <i class="layui-icon layui-icon-rate-half"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-rate"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-rate-solid"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-cellphone"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-vercode"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-login-wechat"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-login-qq"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-login-weibo"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-password"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-username"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-refresh-3"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-auz"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-spread-left"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-shrink-right"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-snowflake"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-tips"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-note"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-home"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-senior"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-refresh"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-refresh-1"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-flag"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-theme"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-notice"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-website"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-console"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-face-surprised"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-set"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-template-1"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-app"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-template"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-praise"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-tread"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-male"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-female"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-camera"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-camera-fill"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-more"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-more-vertical"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-rmb"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-dollar"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-diamond"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-fire"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-return"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-location"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-read"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-survey"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-face-smile"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-face-cry"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-cart-simple"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-cart"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-next"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-prev"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-upload-drag"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-upload"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-download-circle"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-component"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-file-b"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-user"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-find-fill"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-loading-1 layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-add-1"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-play"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-pause"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-headset"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-video"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-voice"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-speaker"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-fonts-del"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-fonts-code"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-fonts-html"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-fonts-strong"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-unlink"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-picture"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-link"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-face-smile-b"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-align-left"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-align-right"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-align-center"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-fonts-u"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-fonts-i"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-tabs"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-radio"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-circle"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-edit"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-share"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-delete"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-form"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-cellphone-fine"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-dialogue"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-fonts-clear"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-layer"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-date"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-water"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-code-circle"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-carousel"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-prev-circle"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-layouts"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-util"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-templeate-1"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-upload-circle"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-tree"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-table"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-chart"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-chart-screen"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-engine"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-triangle-d"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-triangle-r"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-file"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-set-sm"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-add-circle"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-404"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-about"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-up"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-down"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-left"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-right"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-circle-dot"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-search"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-set-fill"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-group"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-friends"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-reply-fill"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-menu-fill"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-log"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-picture-fine"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-face-smile-fine"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-list"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-release"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-ok"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-help"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-chat"></i>
                            </li>

                            <li>
                                <i class="layui-icon layui-icon-top"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-star"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-star-fill"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-close-fill"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-close"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-ok-circle"></i>
                            </li>
                            <li>
                                <i class="layui-icon layui-icon-add-circle-fine"></i>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item"<#if menu.menuType =="F"> style="display: none;"</#if>>
            <label class="layui-form-label">菜单状态：</label>
            <div class="layui-input-block">
                <input type="radio" name="visible" value="0" title="隐藏"<#if !menu.visible> checked="checked"</#if>>
                <input type="radio" name="visible" value="1" title="显示"<#if menu.visible> checked="checked"</#if>>
            </div>
        </div>

        <div class="layui-form-item layui-hide">
            <input type="hidden" name="id" id="id" value="${menu.id!}">
            <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
        </div>
    </form>
</div>
<script src="${global_templets_skin}/systemstyle/layui/layui.js"></script>
<script>
    layui.config({
        base: '${global_templets_skin}/systemstyle/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,form = layui.form;

        form.render(null, 'component-form-element');
        element.render('breadcrumb', 'breadcrumb');

        form.on('submit(component-form-element)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });

        $("input[name='icon']").focus(function() {
            $(".icon-drop").show();
        });
        $(".icon-drop").find(".site-doc-icon i").on("click", function() {
            $('#icon').val($(this).attr('class'));
            $(".icon-drop").hide();
        });

        form.on('radio(menuType)', function (data) {
            var menuType = data.value;
            if (menuType == "M") {
                $("#url").parents(".layui-form-item").hide();
                $("#perms").parents(".layui-form-item").hide();
                $("#icon").parents(".layui-form-item").show();
                $("#target").parents(".layui-form-item").hide();
                $("input[name='visible']").parents(".layui-form-item").show();
            } else if (menuType == "C") {
                $("#url").parents(".layui-form-item").show();
                $("#perms").parents(".layui-form-item").show();
                $("#icon").parents(".layui-form-item").show();
                $("#target").parents(".layui-form-item").show();
                $("input[name='visible']").parents(".layui-form-item").show();
            } else if (menuType == "F") {
                $("#url").parents(".layui-form-item").hide();
                $("#perms").parents(".layui-form-item").show();
                $("#icon").parents(".layui-form-item").hide();
                $("#target").parents(".layui-form-item").hide();
                $("input[name='visible']").parents(".layui-form-item").hide();
            }
        });

        $('#parentTreeName').on('click', function(){
            top.layer.open({
                type: 2 //此处以iframe举例
                ,title: '菜单选择'
                ,area: ['380px', '300px']
                ,shade: 0.3
                ,maxmin: true
                ,shadeClose: true //开启遮罩关闭
                ,content: '/admin/menu/admin_menu_tree.do'
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                    $("#parentTreeName").val(layero.find("iframe")[0].contentWindow.$("#treeName").val());
                    $("#parentId").val(layero.find("iframe")[0].contentWindow.$("#treeId").val());
                    top.layer.close(index); //关闭弹层
                }
                ,zIndex: layer.zIndex
            });
        });
    });
</script>
</body>
</html>